<script setup lang="ts">
/**
 * ! 带验证功能的按钮
 * * 能够根据传入的 auth-tag (按钮权限标识)
 * * 自动判断 按钮显示状态  按钮禁用状态
 * * 自动渲染 按钮颜色 类型 名字 图标
 */
import { authMenuHandle, getMenuHandleData, saveHandleKey } from '@/util/menu'
import { icon } from '@/util/icons'
import { onMounted } from 'vue'

/**
 * authTag :权限标识
 * disabled : 禁用状态
 * authShow : 在无权限的时候的显示状态
 */
const props = defineProps<{
  authTag?: string
  disabled?: boolean
  authShow?: boolean
}>()
onMounted(() => {
  if (props.authTag) {
    saveHandleKey(props.authTag)
  }
})

/* 初始化按钮信息 */
const buttonInfo = getMenuHandleData(props.authTag || '')
</script>

<template>
  <el-button
    v-if="buttonInfo?.show == '1' && (authMenuHandle(buttonInfo.tag!) || authShow)"
    :disabled="disabled || buttonInfo?.status == '0' || !authMenuHandle(buttonInfo.tag!)"
    :icon="buttonInfo.iconType == 'sys' ? (icon as any)[buttonInfo?.icon!] : ''"
    :type="buttonInfo.type"
    :circle="buttonInfo.style == 'circle'"
    :plain="buttonInfo.style == 'plain'"
    :round="buttonInfo.style == 'round'"
  >
    <slot>
      {{ buttonInfo?.name }}
    </slot>
  </el-button>
</template>
